<!-- 套餐抵扣劵列表 -->
<template>
	<view class="p30 plr30">
		<view class="footerClass">
			<view class="footerClasss" @click="retrunFn">返回租电套餐</u-button>
			</view>
		</view>
		<block>
			<view :index="index" v-for="(item, index) in list" :key="item.id" @click="btnFn(item)" class="itemss"
				:class="item.id === numIndex ? 'bd1': ''">
				<view v-if="item.id === numIndex" class="checked">选中</view>
				<view class="oneTitle">
					<view>优惠券名称：{{item.couponName|| '--'}}</view>
					<view class="zbclass1">使用限制：套餐金额满{{item.useCondition|| '0'}}元，可抵扣{{item.discount || '0'}}元</view>
					<view>优惠券介绍：{{item.couponDesc|| '--'}}</view>
					<view class="zbclass">有效截至时间：{{item.endTime || '--'}}</view>
				</view>

				<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
				<view class="twoTitle">
					<view class="zbclass1" style="font-size: 50upx;margin-bottom: 20upx;">{{item.discount|| 0}}</view>
					<view :class="item.status!==0?'zbclass1' : 'zbclass'">
						{{item.status===0?'未使用':item.status===1?'已使用':item.status===2?'已过期':item.status===3?'下架':'--'}}
					</view>

				</view>

			</view>
		</block>
		<view class="flex_aj column ptb20 mrgb130" v-if="showTime && list.length == 0">
			<view class="c9 pt20">您暂无套餐抵扣劵~</view>
		</view>

		<uni-load-more class="mrgb130" v-if="showTime && list.length > 0" :status="loadMoreText" color="#999">
		</uni-load-more>
	</view>
</template>

<script>
	import {
		couponGetUserCoupon
	} from '@/api/user.js'
	export default {
		data() {
			return {
				numIndex: '',
				mealId: '',
				isRadio: 2,
				deviceId: '',
				deviceNo: '',
				showTime: false,
				list: [],
			};
		},
		onLoad(e) {
			console.log("onLoad-e----", e)
			if (e.numIndex) {
				this.numIndex = e.numIndex
			}
			if (e.mealId) {
				this.mealId = e.mealId
			}
			this.isRadio = e.isRadio || 2
			this.deviceId = e.deviceId || ''
			this.deviceNo = e.deviceNo || ''

		},
		async onShow() {
			this.couponGetUserCouponFn()
		},
		methods: {
			// 点击优惠券
			btnFn(item) {
				this.numIndex = item.id
				console.log('11135466', this.numIndex, item.id);
				this.toast('你已选中该抵扣劵，即将返回套餐页面...')
				setTimeout(() => {
					this.retrunFn()
				}, 1500)
			}, // 返回套餐页
			retrunFn() {
				this.routerLink({
					path: `/pages/user/rentEle/package`,
					query: {
						numIndex: this.numIndex,
						mealId: this.mealId,
						isRadio: this.isRadio,
						deviceId: this.deviceId,
						deviceNo: this.deviceNo,
					}
				})
			},
			// 获取套餐抵扣劵  
			async couponGetUserCouponFn() {
				const combo = await couponGetUserCoupon({
					couponType: '4',
					agentId: uni.getStorageSync('oneData').agentId || ''
				})
				this.list = combo.data || []
				this.showTime = true
			},

		}
	};
</script>

<style scoped lang="scss">
	.itemss {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 10upx;
		background-color: #eee;
		margin-bottom: 30upx;
		box-shadow: 2upx 2upx 2upx 2upx #eee;
		color: #000;
		// font-weight: 500;
		position: relative;
		overflow: hidden;
		border: 2px solid #eee;
		font-size: 26upx;
		line-height: 38upx;

		.checked {
			position: absolute;
			top: -70upx;
			left: -70upx;
			background-color: #fc324d;
			color: #fff;
			text-align: center;
			width: 140upx;
			height: 140upx;
			line-height: 230upx;
			font-weight: 500;
			transform: rotate(-45deg);
		}

		.oneTitle {
			margin-right: 20rpx;

		}

		.twoTitle {
			text-align: center;
			font-size: 28rpx;
			color: $u-content-color;
			margin-top: 20rpx;


		}
	}

	.bd1 {
		border: 2px solid #2879fc !important;
	}

	.zbclass {
		color: red;
	}

	.zbclass1 {
		color: green;
	}

	.footerClass {
		position: fixed;
		bottom: 0upx;
		left: 0upx;
		right: 0upx;
		// background-color: #2879fc;
		color: #fff;
		text-align: center;
		font-size: 50upx;
		line-height: 100upx;
		height: 130upx;

		.footerClasss {
			background-color: #2879fc;
			margin-left: 30upx;
			margin-right: 30upx;
		}
	}

	.mrgb130 {
		margin-bottom: 130upx;
	}
</style>